import { onMounted } from 'vue'

export function useBase64Img(options:{el:string}){
  return new Promise(res=>{
    onMounted(()=>{
      const img:HTMLImageElement = document.querySelector(options.el) as HTMLImageElement;
      img.onload = ()=>{
        res({
          baseUrl:base64(img)
        })
      }
    })

    function base64(el:HTMLImageElement){
      const canvas = document.createElement('canvas')
      const ctx=canvas.getContext('2d')
      canvas.width = el.width
      canvas.height = el.height
      ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
      return canvas.toDataURL('image/png')
    }
  })
}


type info={
  name:string
}

import {reactive} from 'vue'
//一些初始化操作
export function useInitReq(){
  const data:info[]=reactive([])
  getCommonList()
  function getCommonList(){
    console.log('我是初始化操作')
    data.push({name:'xm'})
  }
  return {data}
}

//可以在自定义指令里使用自定义hooks
export function useResize(el:HTMLElement,cb:Function){
  const resize=new ResizeObserver(entries=>{
    console.log(entries)
    cb(entries)
  })
  resize.observe(el)
}

